<template name="basics">
  <view>
    <nav-bar
      home
      :bgColor="['#f37402', '#0f0']"
      bgColorAngle="90"
      :backState="1000"
      fontColor="#000"
      title="搜索详情页"
    ></nav-bar>

    <scroll-view scroll-y class="page" @scrolltolower="loadData">
      <view class="cu-bar search bg-white">
        <view class="search-form round">
          <text class="cuIcon-search"></text>
          <input
            v-model="keyword"
            :adjust-position="false"
            type="text"
            placeholder="搜索考题"
            confirm-type="search"
          />
        </view>
        <view class="action">
          <button class="cu-btn bg-green shadow-blur round" @tap="clickSearch">搜索</button>
        </view>
      </view>
      <!--pages/result/result.uniml-->
      <view v-if="show1">
        <view v-if="show">
          <view class="result-card">
            <view class="title">题目</view>
            <text>{{ questions }}</text>
          </view>

          <view class="result-card">
            <view class="title">答案</view>
            <text>{{ answer }}</text>
          </view>
        </view>
        <view v-else>
          <!-- 空白页组件 -->
          <noThing></noThing>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import noThing from '@/components/common/noThing.vue'
// 导入searchAPI函数 from @services/shouye
import { searchAPI } from '@/services/shouye'
import { searchAPI2 } from '@/services/kaosi'

import { onLoad } from '@dcloudio/uni-app'

// 创建一个ref变量，初始值为空字符串
const keyword = ref('')

// 创建一个reactive对象，初始值为空数组
const searchData = ref([])

// 创建一个ref变量，初始值为false
const isEnd = ref(false)

// 创建一个ref变量，初始值为false
const loading = ref(false)

// 创建一个ref变量，初始值为0
const total = ref(0)

// 创建一个ref变量，初始值为4
const pageSize = ref(4)

const currentPage = ref(1)

// 创建一个show1的题目数据
const show1 = ref(false)
const show = ref(false)
const questions = ref('')
const answer = ref('')
// 在加载时执行的函数
onLoad((option: any) => {})

// 定义一个函数goInfo，接收一个参数id
function goInfo(id) {
  // 跳转到其他页面，并传入id作为参数
  uni.navigateTo({
    url: `/pagesA/info/index?id=${id}`,
  })
}

// 点击搜索按钮，清空原来搜索内容
const clickSearch = () => {
  show1.value = true
  // 清空搜索结果
  searchData.value = []
  currentPage.value = 1
  search()
}

// 搜索功能
const search = async () => {
  if (keyword.value === '') {
    uni.showToast({
      title: '请输入搜索内容',
      icon: 'none',
    })
    return
  }
  let res: any = await searchAPI2(keyword.value)
  console.log(res, '搜索结果')

  // 调用searchAPI函数，传入搜索内容和页码，返回一个promise对象

  if (res.code === '1') {
    if (res.data.length === 0) {
      uni.showToast({
        title: '没有搜索到相关内容',
        icon: 'none',
      })
    } else {
      show.value = true
      questions.value = res.data[0].topic
      answer.value = res.data[0].answer

      // 调用uni.showToast提示
      uni.showToast({
        title: '搜索成功',
        icon: 'success',
      })
      // 调用uni.hideLoading隐藏加载提示
    }
  }
}
</script>

<style scoped>
.page {
  height: 100vh;
}
.loadStyle {
  width: 100%;
  height: 60rpx;
  text-align: center;
  color: #bfbfbf;
}

.preview {
  height: 300rpx;
  width: 100%;
}

.img {
  height: 300rpx;
  width: 100%;
}

.result-card {
  border-top: 20rpx solid #f2f2f2;
  padding: 30rpx;
}
.result-card .title {
  font-size: 40rpx;
  font-weight: bold;
}

.uniParse-p {
  font-size: 28rpx;
}

latex {
  width: auto !important;
}

.empty {
  width: 750rpx;
  margin-top: 50rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.empty .text {
  margin-left: 15rpx;
  font-size: 32rpx;
  color: #333;
}
</style>
